<template>
	<view>
		<!-- 选择课包 -->
		<text lines="1" class="text_8">选择课包</text>
		<view class="item">
			<view class=" week-list flex-wrap">
				<view class="week-item" :class="{'active': jiaoSelect.includes(item.item_id)}"
					v-for="item in coursePackageList" :key="item.item_id" @click="handjiao(item)">
					{{ item.name }}
				</view>
			</view>
		</view>

		<!-- 选择教练 -->
		<text lines="1" class="text_8">选择教练</text>
		<view class="item">
			<view class=" week-list flex-wrap">
				<view class="week-item" :class="{'active': coachSelect.includes(item.id)}" v-for="item in coachList"
					:key="item.id" @click="handcoach(item)">
					{{ item.coach_name }}
				</view>
			</view>
		</view>

		<!-- 分组 1 -->
		<u-row>
			<u-col :span="5">
				<u-form-item label="默认分组 1">
					<u-input v-model="group1" style="width: 150rpx;" @input="changeGroup(1)"></u-input>
				</u-form-item>
			</u-col>
			<u-col :span="1" style="text-align: left;">
				<u-form-item label-width="10rpx">
					<u-checkbox shape='circle' :checked="filters.open_group1" @change="changeOpen(1)"></u-checkbox>
				</u-form-item>
			</u-col>
			<u-col :span="5" style="text-align: right;">
				<u-button type="primary" size="mini" @click="addSku(1)" :disabled="!filters.open_group1"
					style="width: 150rpx;">
					增加
				</u-button>
			</u-col>
		</u-row>
		<u-row v-show="filters.open_group1">
			<u-col :span="12">
				<u-form-item label="默认分组 1 规格">
					<view v-for="(input, index) in group1SkuList" :key="index" class="input-group">
						<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
							@input="changeSku(1)"></u-input>
						<view class="" @click="removeInput(index, 1)">
							删除
						</view>
					</view>
				</u-form-item>
			</u-col>
		</u-row>

		<!-- 分组 2 -->
		<u-row>
			<u-col :span="5">
				<u-form-item label="规格分组 2">
					<u-input v-model="group2" style="width: 150rpx;" @input="changeGroup(2)"></u-input>
				</u-form-item>
			</u-col>
			<u-col :span="1" style="text-align: left;">
				<u-form-item label-width="10rpx">
					<u-checkbox shape='circle' :checked="filters.open_group2" @change="changeOpen(2)"></u-checkbox>
				</u-form-item>
			</u-col>
			<u-col :span="5" style="text-align: right;">
				<u-button type="primary" size="mini" @click="addSku(2)" :disabled="!filters.open_group2">
					增加
				</u-button>
			</u-col>
		</u-row>
		<u-row v-show="filters.open_group2">
			<u-col :span="12">
				<u-form-item label="默认分组 2 规格">
					<view v-for="(input, index) in group2SkuList" :key="index" class="input-group">
						<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
							@input="changeSku(2)"></u-input>
						<view class="" @click="removeInput(index, 2)">
							删除
						</view>
					</view>
				</u-form-item>
			</u-col>
		</u-row>

		<!-- 分组 3 -->
		<u-row>
			<u-col :span="5">
				<u-form-item label="规格分组 3">
					<u-input v-model="group3" style="width: 150rpx;" @input="changeGroup(3)"></u-input>
				</u-form-item>
			</u-col>
			<u-col :span="1" style="text-align: left;">
				<u-form-item label-width="10rpx">
					<u-checkbox shape='circle' :checked="filters.open_group3" @change="changeOpen(3)"></u-checkbox>
				</u-form-item>
			</u-col>
			<u-col :span="5" style="text-align: right;">
				<u-button type="primary" size="mini" @click="addSku(3)" :disabled="!filters.open_group3">
					增加
				</u-button>
			</u-col>
		</u-row>
		<u-row v-show="filters.open_group3">
			<u-col :span="12">
				<u-form-item label="默认分组 3 规格">
					<view v-for="(input, index) in group3SkuList" :key="index" class="input-group">
						<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
							@input="changeSku(3)"></u-input>
						<view class="" @click="removeInput(index, 3)">
							删除
						</view>
					</view>
				</u-form-item>
			</u-col>
		</u-row>

		<!-- 表格展示 -->
		<table border="1">
			<thead>
				<tr>
					<th v-for="(column, index) in columns" :key="index">{{ column.label }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
					<td v-for="(column, colIndex) in columns" :key="colIndex">
						<input v-if="column.type == 'text'" v-model="row[column.prop]" :disabled="column.disable" />
						<input v-else-if="column.type === 'number'" v-model.number="row[column.prop]" type="number"
							:controls="true" :min="0" :step="1" style="width: 90px;" :disabled="column.disable" />
						<input v-else-if="column.type == 'date'" v-model="row[column.prop]" type="date"
							placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 120px;" />
						<input v-else-if="column.type === 'checkbox'" v-model="row[column.prop]" type="checkbox"
							:disabled="column.disable" style="margin-left: 10px;" />
					</td>
				</tr>
			</tbody>
		</table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				group1: '分组 1',
				group2: '分组 2',
				group3: '分组 3',
				filters: {
					open_group1: false,
					open_group2: false,
					open_group3: false,
					train_course: '模拟课程ID'
				},
				group1SkuList: [],
				group2SkuList: [],
				group3SkuList: [],
				columns: [],
				tableData: [],
				coursePackageList: [{
						course_price: "1000.00",
						hour_num: 10,
						item_id: "186-10-1000.00-0-313",
						name: "初级一对一 ",
					},
					{
						course_price: "1300.00",
						hour_num: 20,
						item_id: "187-10-1300.00-0-313",
						name: "中级一对一",
					},
					{
						course_price: "1800.00",
						hour_num: 30,
						item_id: "188-10-1800.00-0-313",
						name: "高级一对一",
					}
				],
				jiaoSelect: [],
				coachList: [{
						coach_name: "关汉卿",
						coach_pin: "83-关汉卿",
						id: 83,
					},
					{
						coach_name: "纳兰容若",
						coach_pin: "85-纳兰容若",
						id: 85,
					},
					{
						coach_name: "宋之问",
						coach_pin: "91-宋之问",
						id: 91,
					},
					{
						coach_name: "王彩华",
						coach_pin: "354-王彩华",
						id: 354,
					}
				],
				coachSelect: []
			};
		},
		created() {
			// 初始化columns
			// this.updateColumns();
		},
		methods: {
			handjiao(item) {
				let data = item.item_id;
				const index = this.jiaoSelect.indexOf(data);
				if (index > -1) {
					this.jiaoSelect.splice(index, 1);
				} else {
					this.jiaoSelect.push(data);
				}
				this.addTableData();
				this.updateColumns(); // 点击后更新columns
			},
			handcoach(item) {
				let data = item.id;
				const index = this.coachSelect.indexOf(data);
				if (index > -1) {
					this.coachSelect.splice(index, 1);
				} else {
					this.coachSelect.push(data);
				}
				this.addTableData();
			},
			changeGroup(num) {
				if (num === 1 && this.group1) {
					this.columns.find(col => col.prop === 'group1') && (this.columns.find(col => col.prop === 'group1')
						.label = this.group1);
				} else if (num === 2 && this.group2) {
					this.columns.find(col => col.prop === 'group2') && (this.columns.find(col => col.prop === 'group2')
						.label = this.group2);
				} else if (num === 3 && this.group3) {
					this.columns.find(col => col.prop === 'group3') && (this.columns.find(col => col.prop === 'group3')
						.label = this.group3);
				}
				this.addTableData();
				this.updateColumns(); // 点击后更新columns
			},
			changeOpen(type) {
				if (!this.filters.train_course) {
					uni.showToast({
						title: '请先选择课程！',
						icon: 'none'
					});
					this.filters[`open_group${type}`] = false;
					return;
				}
				this.filters[`open_group${type}`] = !this.filters[`open_group${type}`];
				const skuList = this[`group${type}SkuList`];
				if (this.filters[`open_group${type}`]) {
					skuList.push({
						value: `规格1`
					});
				} else {
					this[`group${type}SkuList`] = [];
				}
				this.updateColumns();
				this.addTableData();
			},
			addSku(type) {
				const list = this[`group${type}SkuList`];
				const length = list.length + 1;
				list.push({
					value: `规格${length}`
				});
				this.addTableData();
			},
			removeInput(index, type) {
				const list = this[`group${type}SkuList`];
				list.splice(index, 1);
				this.addTableData();
			},
			changeSku(type) {
				this.addTableData();
			},
			addTableData() {
				this.tableData = [];
				// 已选择的课包
				const selectedCoursePackages = this.coursePackageList.filter(item => this.jiaoSelect.includes(item
					.item_id));
				// 已选择的教练
				const selectedCoaches = this.coachList.filter(item => this.coachSelect.includes(item.id));
				// 分组1规格
				const group1Data = this.group1SkuList.map(item => item.value);
				// 分组2规格
				const group2Data = this.group2SkuList.map(item => item.value);
				// 分组3规格
				const group3Data = this.group3SkuList.map(item => item.value);

				// 找到有数据的维度
				let hasDataDimensions = [];
				if (selectedCoursePackages.length > 0) hasDataDimensions.push('coursePackage');
				if (selectedCoaches.length > 0) hasDataDimensions.push('coach');
				if (group1Data.length > 0) hasDataDimensions.push('group1');
				if (group2Data.length > 0) hasDataDimensions.push('group2');
				if (group3Data.length > 0) hasDataDimensions.push('group3');

				// 如果没有任何维度有数据，直接返回
				if (hasDataDimensions.length === 0) return;

				// 假设只有一个维度有数据的情况
				if (hasDataDimensions.length === 1) {
					const dimension = hasDataDimensions[0];
					if (dimension === 'coursePackage') {
						selectedCoursePackages.forEach(course => {
							this.tableData.push({
								coach_id: 0,
								coach_name: '',
								hour_num_period: `${course.hour_num}/0`,
								hour_num: course.hour_num,
								time_long: '0',
								group1: '',
								group2: '',
								group3: '',
								line_price: course.course_price,
								stock: 0
							});
						});
					} else if (dimension === 'coach') {
						selectedCoaches.forEach(coach => {
							this.tableData.push({
								coach_id: coach.id,
								coach_name: coach.coach_name,
								hour_num_period: '0/0',
								hour_num: 0,
								time_long: '0',
								group1: '',
								group2: '',
								group3: '',
								line_price: 0,
								stock: 0
							});
						});
					} else if (dimension === 'group1') {
						group1Data.forEach(g1 => {
							this.tableData.push({
								coach_id: 0,
								coach_name: '',
								hour_num_period: '0/0',
								hour_num: 0,
								time_long: '0',
								group1: g1,
								group2: '',
								group3: '',
								line_price: 0,
								stock: g1 === '规格1' ? 10 : 20
							});
						});
					} else if (dimension === 'group2') {
						group2Data.forEach(g2 => {
							this.tableData.push({
								coach_id: 0,
								coach_name: '',
								hour_num_period: '0/0',
								hour_num: 0,
								time_long: '0',
								group1: '',
								group2: g2,
								group3: '',
								line_price: 0,
								stock: 0
							});
						});
					} else if (dimension === 'group3') {
						group3Data.forEach(g3 => {
							this.tableData.push({
								coach_id: 0,
								coach_name: '',
								hour_num_period: '0/0',
								hour_num: 0,
								time_long: '0',
								group1: '',
								group2: '',
								group3: g3,
								line_price: 0,
								stock: 0
							});
						});
					}
				} else {
					// 多个维度有数据时，进行多层循环组合数据
					// 这里简化为两两组合的情况，实际可以根据需求完善多层循环逻辑
					if (hasDataDimensions.includes('coursePackage') && hasDataDimensions.includes('coach')) {
						for (let coach of selectedCoaches) {
							for (let course of selectedCoursePackages) {
								this.tableData.push({
									coach_id: coach.id,
									coach_name: coach.coach_name,
									hour_num_period: `${course.hour_num}/0`,
									hour_num: course.hour_num,
									time_long: '0',
									group1: '',
									group2: '',
									group3: '',
									line_price: course.course_price,
									stock: 0
								});
							}
						}
					}
					// 其他多个维度组合情况类似，可根据实际情况扩展
				}
			},
			updateColumns() {
				const newColumns = [{
						prop: 'coach_id',
						label: '教练ID',
						type: 'text',
						width: '100rpx',
						disable: true
					},
					{
						prop: 'coach_name',
						label: '教练姓名',
						type: 'text',
						width: '120rpx',
						disable: true
					},
					{
						prop: 'hour_num_period',
						label: '课时数/有效期',
						type: 'text',
						width: '120rpx',
						disable: true
					},
					{
						prop: 'hour_num',
						label: '课时数',
						type: 'number',
						width: '80rpx',
						disable: true
					},
					{
						prop: 'time_long',
						label: '时长',
						type: 'number',
						width: '80rpx',
						disable: true
					},
					{
						prop: 'line_price',
						label: '套餐价',
						type: 'number',
						width: '100rpx',
						disable: true
					},
					{
						prop: 'stock',
						label: '库存',
						type: 'number',
						width: '80rpx',
						disable: true
					}
				];
				if (this.filters.open_group1) {
					newColumns.push({
						prop: 'group1',
						label: this.group1,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				if (this.filters.open_group2) {
					newColumns.push({
						prop: 'group2',
						label: this.group2,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				if (this.filters.open_group3) {
					newColumns.push({
						prop: 'group3',
						label: this.group3,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				this.columns = newColumns;
			}
		}
	};
</script>

<style lang="less" scoped>
	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.u-input {
		margin-right: 10rpx;
	}

	.u-icon {
		cursor: pointer;
	}

	.week-list {
		flex-direction: row;
		width: 100%;
		font-size: 24rpx;
		flex-wrap: wrap;
		display: flex;

		.week-item {
			padding: 15rpx 0;
			background-color: rgb(243, 243, 243);
			border-radius: 5rpx;
			text-align: center;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 500;
			border: solid 2rpx transparent;
			box-sizing: border-box;
			padding: 6rpx 12rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}

		.active {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.active1 {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.active2 {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.check {
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			position: absolute;
			bottom: 10rpx;
			right: 0;
		}

		table {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		thead {
			width: 100%;
		}

		tbody {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		tr {
			width: 100%;
			box-sizing: border-box;
			display: flex;
		}

		th,
		td {
			width: 15%;
		}
	}
</style>